<template>
  <div>
    <div class="flex justify-between min-w-full mb-8">
      <el-carousel
        ref="headBanner"
        indicator-position="outside"
        class="w-full"
        :autoplay="true"
        height="38rem"
        style="position: relative"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.redirectUrl">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.picture"
            ></el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="w-1200-container content-container">
      <div class="main-box pb-20 relative">
        <ul class="select-box" @mouseleave="handleLeave">
          <div
            class="hover-bgcube"
            :style="{
              left: moveCubeleft + 'px',
              top: moveCubeTop + 'px',
            }"
          ></div>
          <li
            v-for="(item, index) in companyList"
            :key="item.serial"
            :data-index="index"
            :class="[activeClass(item)]"
            @click="handleCompany(item)"
            @mouseenter="handleEnter"
          >
            <p
              :class="[
                'relative z-20',
                activeIndex === index ? 'text-white' : 'text-black',
              ]"
            >
              {{ item.enterType }}
            </p>
            <p
              :class="[
                'key-ele relative z-20',
                activeIndex === index ? 'text-white' : 'text-blue-500',
              ]"
            >
              {{ item.number }}
            </p>
          </li>
        </ul>
        <div class="search-container">
          <div class="search-box">
            <el-input
              size="large"
              placeholder="请输入内容"
              v-model="queryParams.comName"
              @keyup.enter.native="getList"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append" @click.stop="getList"
                >搜索</span
              >
            </el-input>
          </div>
          <!-- <el-button type="primary" class="ml-4" @click="resetSearch">
          重置搜索
        </el-button> -->
        </div>
        <div class="select-container">
          <div v-show="companyForSelect('fieldId')">
            <!-- <TreeFileds/> -->
            <div class="strip-container">
              <span class="label"> 所属领域: </span>
              <SelectFileds
                @change="changeField"
                :fieldValue="queryParams.fieldId"
              />
              <el-button
                @click="resetField"
                class="h-8 ml-4 mt-1"
                type="primary"
                size="mini"
              >
                重置
              </el-button>
            </div>
            <!-- <router-select-strip
              listPropVName="dictLabel"
              :active-id.sync="queryParams.classAField"
              :screenList="positionList"
              label="所属领域"
              @itemClick="handlePosition"
            /> -->
          </div>

          <div v-show="companyForSelect('recognYear')">
            <router-select-strip
              listPropVName="dictLabel"
              :active-id.sync="queryParams.recognYear"
              :screenList="yearList"
              label="认定年度"
              @itemClick="handleConfirmYear"
            />
          </div>

          <div v-show="companyForSelect('year')">
            <router-select-strip
              listPropVName="dictLabel"
              :active-id.sync="queryParams.year"
              :screenList="yearList"
              label="形成时间"
              @itemClick="handleCreatYear"
            />
          </div>

          <!-- <div v-show="companyForSelect('enterType')">
            <router-select-strip
              listPropVName="dictValue"
              :active-id.sync="queryParams.enterType"
              :screenList="cityTypeList"
              label="类型"
              @itemClick="handleCity"
            />
          </div> -->

          <!--  创新平台  -->
          <div v-show="companyForSelect('platformType')">
            <router-select-strip
              listPropVName="dictValue"
              :active-id.sync="queryParams.platformType"
              :screenList="cityTypeList"
              label="类型"
              @itemClick="handlePlatform"
            />
          </div>

          <div v-show="companyForSelect('group-enterType')">
            <router-select-strip
              listPropVName="dictValue"
              :active-id.sync="queryParams.enterType"
              :screenList="groupTypeList"
              label="类型"
              @itemClick="handleGroup"
            />
          </div>
          <div v-show="companyForSelect('believeBatch')">
            <router-select-strip
              listPropVName="dictValue"
              :active-id.sync="queryParams.believeBatch"
              :screenList="believeTypes"
              label="类型"
              @itemClick="handleBelieve"
            />
          </div>
        </div>
        <!-- 列表项 -->
        <ul
          v-if="queryParams.serial !== '8'"
          class="list-container"
          v-loading="infoLoading"
        >
          <company-card
            v-for="item in infoList"
            :comDisabled="companyDisabled(queryParams.serial)"
            :key="item.id"
            :itemId="item.id"
            :companyIcon="item.picture"
            :companyName="item.comName"
            :buildTime="item.estaTime"
            :address="item.coordinate || item.address"
            :listed="item.listed"
            :hightCompany="item.hightCompany"
          />
        </ul>
        <ul v-else class="list-container" v-loading="infoLoading">
          <high-school-card
            v-for="item in infoList"
            :key="item.id"
            :itemId="item.id"
            :icon="item.picture"
            :title="item.title"
            :address="schoolAddress(item)"
          />
        </ul>
        <div class="absolute bottom-0 right-0">
          <pagination
            :total="tableTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>

      <ul class="aside-box">
        <li>
          <link-card>
            <router-link :to="{ path: '/info/inforank/gazelle' }">
              <div class="card-contain bg-blue-500 hover:bg-blue-400">
                <div class="card-box">
                  <p>瞪羚 GAZELLE</p>
                  <p>企业排行榜</p>
                </div>
              </div>
            </router-link>
          </link-card>
        </li>
        <li>
          <link-card>
            <router-link :to="{ path: '/info/inforank/unicorn' }">
              <div class="card-contain bg-yellow-500 hover:bg-yellow-400">
                <div class="card-box">
                  <p>独角兽 UNICORN</p>
                  <p>企业排行榜</p>
                </div>
              </div>
            </router-link>
          </link-card>
        </li>
        <li>
          <company-year-chart />
        </li>
        <li>
          <gazelle-filed-chart />
        </li>
        <li>
          <company-city-chart />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getComType,
  getKeXiao,
  getGaoXiao,
  getGaoXiaoNum,
  getVentureCap,
  getInnovationPlatform,
  getInfo,
  getBusiness,
  getScientIns,
} from "@/api/info.js";
import RouterSelectStrip from "@/components/HeadScreenStrip/RouterSelectStrip.vue";
import DashLine from "@/components/DashLine";
import CompanyCityChart from "@/views/components/CompanyCityChart";
import CompanyYearChart from "@/views/components/CompanyYearChart";
import GazelleFiledChart from "@/views/components/GazelleFiledChart";
import CompanyCard from "@/views/components/CompanyCard";
import HighSchoolCard from "@/views/components/HighSchoolCard";

import TreeFileds from "@/views/components/TreeFileds";
import SelectFileds from "@/views/components/SelectFileds";

import { getBanner } from "@/api/banner";

import LinkCard from "@/views/components/LinkCard";
export default {
  components: {
    RouterSelectStrip,
    CompanyYearChart,
    CompanyCityChart,
    GazelleFiledChart,
    DashLine,
    LinkCard,
    CompanyCard,
    HighSchoolCard,
    TreeFileds,
    SelectFileds,
  },
  data() {
    return {
      moveCubeleft: 0,
      moveCubeTop: 0,
      setClearMark: null,
      activeIndex: 0,

      tableTotal: 0,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        // 企业类型
        serial: undefined,
        fieldId: "",
        // 一级领域
        classAField: undefined,
        // 认定年度
        recognYear: undefined,
        // 成立时间
        year: undefined,
        enterType: undefined,
        comName: undefined,
        // 科技中小企业 独有
        believeBatch: undefined,

        // 创新平台独有
        platformType: undefined,
      },
      infoLoading: false,
      infoList: [],
      bannerDictLabel: "数据",
      bannerDicts: [],
      bannerList: [],

      // 科技中小企业独有 认定批次字典
      believeTypes: [],

      companyHasSelect: {
        1: [],
        2: ["fieldId", "recognYear", "year"],
        3: ["fieldId", "recognYear", "year"],
        4: ["fieldId", "recognYear", "year"],
        5: ["fieldId", "recognYear", "year"],
        6: ["fieldId", "recognYear", "year"],
        7: ["recognYear", "believeBatch"],
        8: [],
        9: [],
        10: ["platformType"],
        11: ["group-enterType"],
        12: [],
        // 数组元素值 对应  companyList 中 serial 属性值
        // none:['1','8','9','12'],
        // laboratory:['10'],
        // group:['11'],
        // threeSelect: ['2','3','4','5','6','7']
      },

      // 根据 serial 值的不同，
      // 确认 获取到的数据列表  是否  可以点击详情
      companyDisabledList: ["7", "8", "9", "10", "11", "12"],
      // 接口对照表
      interfaceList: [
        {
          serial: "7",
          funName: "localGetKeXiao",
        },
        {
          serial: "8",
          funName: "localGetGaoXiao",
        },

        {
          serial: "11",
          funName: "localGetBusiness",
        },
        {
          serial: "9",
          funName: "localGetScientIns",
        },
        {
          serial: "10",
          funName: "localGetInnovationPlatform",
        },

        {
          serial: "12",
          funName: "localGetVentureCap",
        },
      ],

      // 筛选条件
      // 列表数据
      companyList: [],
      // 行业领域
      positionList: [
        { dictValue: 0, dictLabel: "新材料" },
        { dictValue: 1, dictLabel: "新能源汽车" },
        { dictValue: 2, dictLabel: "新能源" },
        { dictValue: 3, dictLabel: "节能环保" },
        { dictValue: 4, dictLabel: "现代服务" },
        { dictValue: 5, dictLabel: "教育培训" },
        { dictValue: 6, dictLabel: "互联网" },
        { dictValue: 7, dictLabel: "生物健康" },
        { dictValue: 8, dictLabel: "汽车" },
        { dictValue: 9, dictLabel: "文创体育" },
        { dictValue: 10, dictLabel: "科技服务" },
        { dictValue: 11, dictLabel: "装备制造" },
        { dictValue: 12, dictLabel: "电子信息" },
        { dictValue: 13, dictLabel: "军民融合" },
      ],
      // 形成时间
      yearList: [
        // { dictValue: 0, dictLabel: "2021" },
        // { dictValue: 1, dictLabel: "2020" },
        // { dictValue: 2, dictLabel: "2019" },
        // { dictValue: 3, dictLabel: "2018" },
        // { dictValue: 4, dictLabel: "2017" },
        // { dictValue: 5, dictLabel: "2016" },
        // { dictValue: 6, dictLabel: "2015" },
      ],
      // 实验室类型
      cityTypeList: [
        // { dictValue: 0, dictLabel: "国家重点实验室" },
        // { dictValue: 1, dictLabel: "国家工程技术研究中心" },
        // { dictValue: 2, dictLabel: "国家工程研究中心" },
        // { dictValue: 3, dictLabel: "国家企业技术中心" },
      ],
      // 载体类型
      groupTypeList: [
        // { dictValue: 0, dictLabel: "孵化器" },
        // { dictValue: 1, dictLabel: "众创空间" },
        // { dictValue: 2, dictLabel: "专业众创空间" },
        // { dictValue: 3, dictLabel: "大学科技园" },
      ],
    };
  },
  computed: {
    schoolAddress() {
      return (infoItem) => {
        const AddressNames = ["province", "city", "region"];
        let resAddressArr = AddressNames.filter((item) => infoItem[item]);
        return infoItem[resAddressArr[0]];
      };
    },
    companyDisabled() {
      return (nowSerial) => {
        if (this.companyDisabledList.indexOf(nowSerial) === -1) {
          return false;
        }
        return true;
      };
    },
    activeClass() {
      return (item) => {
        return item.serial === this.queryParams.serial ? "active-item" : "item";
      };
    },
    companyForSelect() {
      return (selectName) => {
        const serial = this.queryParams.serial;
        const moduleHasSelect = this.companyHasSelect[serial] || [];
        const findItem = moduleHasSelect.find((item) => item === selectName);
        if (findItem) {
          return true;
        }
        return false;
      };
    },
  },
  async created() {
    await this.initCompanyType();
    this.getList();

    await this.getBannerDicts();
    await this.getYearDicts();
    await this.getBussinesDicts();
    await this.getBelieveDicts();
    this.initBannerList();
    this.initPlatformTypes();
  },
  mounted() {},
  methods: {
    initPlatformTypes() {
      this.getDicts("platform_type").then((res) => {
        if (res.code === 200) {
          this.cityTypeList = res.data;
        }
      });
    },
    // 根据字典名称 获取相应的 字典值
    /**
     * @param {Array} dicts 字典列表
     * @param {String} dictLabel 字典名称
     * @returns {String} 返回相应的字典值.若没有相应的值返回  ''  （空字符串）
     */
    getBannerValue(dicts, dictLabel) {
      let findItem = dicts.find((item) => item.dictLabel === dictLabel);
      return findItem && findItem.dictValue ? findItem.dictValue : "";
    },

    // 初始化轮播
    initBannerList() {
      let bannerValue = this.getBannerValue(
        this.bannerDicts,
        this.bannerDictLabel
      );
      getBanner({ type: parseInt(bannerValue) }).then((res) => {
        if (res.code == 200) {
          this.bannerList = res.rows;
        }
      });
    },

    /**
     * @description 获取轮播图字典列表 并赋值给 bannerDicts
     */
    async getBannerDicts() {
      let dictsRes = await this.getDicts("rotation_map");
      if (dictsRes.code === 200) {
        this.bannerDicts = dictsRes.data;
      }
    },
    /**
     * @description 获取年份字典列表
     */
    async getYearDicts() {
      const Dictname = "year_list";
      const res = await this.getDicts(Dictname);

      if (res.code === 200) {
        this.yearList = res.data;
      }
    },
    /**
     * @description 获取企业载体类型列表
     */
    async getBussinesDicts() {
      const Dictname = "carrier_type";
      const res = await this.getDicts(Dictname);
      if (res.code === 200) {
        this.groupTypeList = res.data;
      }
    },
    /**
     * @description  获取认定批次
     */
    async getBelieveDicts() {
      const Dictname = "believe_batch";
      const res = await this.getDicts(Dictname);

      if (res.code === 200) {
        this.believeTypes = res.data;
      }
    },
    // 获取高校院所总数
    async localGetGaoXiaoNum() {
      let res = await getGaoXiaoNum();
      return res;
    },

    // 获取数据类别
    async initCompanyType() {
      let res = await getComType();
      let gaoxiaoRes = await this.localGetGaoXiaoNum();
      const gaoxiaoNum = gaoxiaoRes.data.number;
      if (res.code === 200) {
        console.log(res);
        let tempData = res.data;
        const kexiaoName = "科技型中小企业";
        const unicornName = "潜在瞪羚企业";
        for (const key in tempData) {
          if (Object.hasOwnProperty.call(tempData, key)) {
            const element = tempData[key];
            if (element.serial == 7) {
              element.enterType = kexiaoName;
            }
            if (element.serial == 3) {
              element.enterType = unicornName;
            }
            if (element.serial == 8) {
              element.number = gaoxiaoNum;
            }
          }
        }

        this.companyList = tempData;
        this.queryParams.serial = this.companyList[0]["serial"];
      }
    },
    handleDetail(id) {
      //  let routeData = this.$router.resolve({
      //  path: '/info/infodetail/',
      //   query: { id: id }
      // })
      // window.open(routeData.href, '_blank')
      this.$router.push({
        path: "/info/infodetail/" + id,
      });
    },
    restSearch() {
      let serial = this.queryParams.serial;

      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        serial,
        title: undefined,
        // 一级领域
        classAField: undefined,
        // 普通类型 认定年度
        recognYear: undefined,

        // 成立时间
        year: undefined,
        enterType: undefined,
        comName: undefined,

        // 科技中小企业 独有
        believeBatch: undefined,

        platformType: undefined,
      };
      this.getList();
    },
    /**
     * @param {Object} item 列表项对象
     * @description 当点击数据 主列表项时触发该方法
     */
    handleCompany(item) {
      if (item.serial && item.serial !== this.queryParams.serial) {
        this.queryParams.serial = item.serial;
        this.restSearch();
      }
    },
    // 封装 获取科技中小企业 信息
    async localGetKeXiao(query) {
      // 科技中小企业 独有：认定年度
      // believeYear: undefined,
      query["believeYear"] = query["recognYear"];
      return await getKeXiao(query);
    },
    // 封装 获取高校 信息
    async localGetGaoXiao(query) {
      // 科技中小企业 独有：认定年度
      // believeYear: undefined,
      return await getGaoXiao(query);
    },
    // 封装 获取创投机构信息
    async localGetVentureCap(query) {
      return await getVentureCap(query);
    },
    // 封装 获取创业载体信息 接口
    async localGetBusiness(query) {
      query["carrierType"] = query["enterType"];
      return await getBusiness(query);
    },

    async localGetInnovationPlatform(query) {
      return await getInnovationPlatform(query);
    },

    // 封装 科研院所接口
    async localGetScientIns(query) {
      return await getScientIns(query);
    },
    // 根据 企业不同调取不同接口
    async getComInfo(serialValue) {
      let findItem = this.interfaceList.find(
        (item) => item.serial === serialValue
      );
      if (findItem && findItem.funName) {
        const res = await this[findItem.funName](this.queryParams);
        this.infoList = res.rows;
        this.tableTotal = res.total;
        this.infoLoading = false;
        return true;
      }
      return false;
    },
    // 获取列表数据
    async getList() {
      this.infoLoading = true;
      this.queryParams.title = this.queryParams.comName
      let isAlreadyGet = await this.getComInfo(this.queryParams.serial);
      if (isAlreadyGet) {
        return;
      }

      // 因为 believeBatch 属于科技中小企业独有 的 筛选参数
      this.queryParams.believeBatch = undefined;
      this.queryParams.platformType = undefined

      let res = await getInfo(this.queryParams);
      if (res.code === 200) {
        this.infoList = res.rows;
        this.tableTotal = res.total;
      }
      this.infoLoading = false;
    },
    // 形成年份筛选
    handleCreatYear(activeItem) {
      if (this.queryParams.year === "全部") {
        this.queryParams.year = undefined;
      }
      this.getList();
    },
    // 认定年份筛选
    handleConfirmYear(activeItem) {
      if (this.queryParams.recognYear === "全部") {
        this.queryParams.recognYear = undefined;
      }
      this.getList();
    },
    /**
     * @param {String} v
     * @description v 赋值给  queryParams.fieldId,并调用 数据列表
     */
    changeField(v) {
      if (v !== this.fieldId) {
        this.queryParams.fieldId = v;
        this.getList();
      }
    },
    resetField() {
      this.queryParams.fieldId = undefined;
      this.getList();
    },
    // 领域筛选
    handlePosition(activeItem) {
      if (this.queryParams.classAField === "全部") {
        this.queryParams.classAField = undefined;
      }
      this.getList();
    },
    // 国家实验室筛选
    handleCity() {
      if (this.queryParams.enterType === "全部") {
        this.queryParams.enterType = undefined;
      }
      this.getList();
    },
    handlePlatform() {
      if (this.queryParams.platformType === "全部") {
        this.queryParams.platformType = undefined;
      }
      this.getList();
    },
    handleGroup() {
      if (this.queryParams.enterType === "全部") {
        this.queryParams.enterType = undefined;
      }
      this.getList();
    },
    handleBelieve() {
      if (this.queryParams.believeBatch === "全部") {
        this.queryParams.believeBatch = undefined;
      }
      this.getList();
    },

    /**
     * @param listIndex  ul.select-box > li li 数组中的索引
     * @description 根据数组索引 listIndex 确定方块 left top  的值
     *              修改 this.moveCubeleft  this.moveCubeTop 值
     */
    moveCube(listIndex) {
      setTimeout(() => {
        let xIndex = listIndex % 6;
        let yIndex = Math.floor(listIndex / 6);
        let leftV = xIndex * 130;
        let topV = yIndex * 100;
        this.activeIndex = parseInt(listIndex);
        this.moveCubeleft = leftV;
        this.moveCubeTop = topV;
      }, 200);
    },

    /**
     * @param   e   事件对象
     * @description 监听 鼠标进入到哪个 ul.select-box > li 元素，获取 元素上 data-index 数据
     *              data-index 表示其的索引，获取索引 调用 moveCube 方法
     */
    handleEnter(e) {
      let eleIndex = e.target.dataset.index;
      if (this.setClearMark) {
        clearTimeout(this.setClearMark);
      }
      // this.setClearMark = setTimeout(() => {
      //   this.moveCube(-1);
      // }, 2000);
      this.moveCube(eleIndex);
    },

    handleLeave() {
      this.setClearMark = setTimeout(() => {
        this.moveCube(-1);
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped >
.select-box {
  min-height: 200px;
  @apply relative overflow-hidden flex flex-wrap justify-start shadow-lg rounded-md border border-gray-100;

  .hover-bgcube {
    width: 130px;
    height: 100px;
    @apply absolute transition-all duration-75 bg-blue-300;
  }

  .item,
  .active-item {
    min-width: 130px;
    min-height: 100px;
    width: 130px;
    height: 100px;
    @apply z-30 cursor-pointer text-center py-4 px-2 overflow-hidden;

    .key-ele {
      @apply z-20 text-xl font-bold  pt-4  overflow-hidden;
    }
  }

  .active-item {
    @apply bg-blue-500;
    p {
      color: #fff !important;
    }
    .key-ele {
      color: #fff !important;
    }
  }
}

.select-container {
  margin-top: 32px;
  background-color: #f6f9ff;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  margin-top: 25px;

  .search-box {
    flex-basis: 1;
    flex-grow: 1;
    width: 560px;
    ::v-deep .el-input-group__append {
      background-color: #409eff;
      cursor: pointer;
    }
    .search-btn {
      background-color: #409eff;
      color: #fff;
    }
  }
}
.list-container {
  // min-height: 1350px;
  @apply py-4 mt-4;
  .list-item {
    @apply flex p-4 border-b-2  border-gray-100 cursor-pointer;
    .left {
      min-width: 103px;
      min-height: 103px;
      width: 103px;
      height: 103px;
      @apply rounded-md shadow-lg;
    }
    .main {
      @apply flex-1 flex-grow flex flex-col justify-around px-4;
      .sub-line {
        @apply flex;
        li {
          @apply mr-4;
        }
      }
    }
    .right {
      @apply m-auto text-t999;
    }
  }
}

.aside-box {
  li:not(:nth-of-type(1)) {
    @apply mt-6;
  }
  .card-contain {
    width: 100%;
    height: 106px;
    @apply rounded-md;
    .card-box {
      @apply h-full w-9/12 flex flex-col justify-center pl-6 text-white leading-8;
    }
  }
}

.strip-container {
  display: flex;
  width: 100%;
  padding: 24px;
  padding-bottom: 0;
  padding-right: 6rem;
  font-size: 14px;
  height: 5rem;

  .label {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    min-width: 5rem;
    color: #333333;
    margin-right: 16px;
  }
}
</style>